<template>
  <div>
    <!--不是html标签 前端传入了最大长度参数  带...的文字-->
    <j-ellipsis v-if="!html && length && val && val.length>length" :value="val" :length="length"/>
    <!--不是html标签 前端没有传入最大长度参数 但是字符长度超出了最大设置  带...的文字-->
    <j-ellipsis v-else-if="!html && !length && val && val.length>maxLength" :value="val" :length="maxLength"/>
    <!-- html标签-->
    <div v-else-if="html" v-html="val" :style="{'max-width': width_ + 'px','overflow': 'hidden','text-overflow':'ellipsis','white-space': 'nowrap','margin':'0 auto','height':'25px'}"></div>
    <!--不处理字符串-->
    <span v-else v-html="val" style="text-align: center"></span>
  </div>

</template>


<script>

  export default {
    name: 'JTextSlot',
    components: {
    },
    data () {
      return {
        val:'',
        length:'',
        maxLength:20,
        html:false,
        width_:'',
      }
    },
    /*监听图片值*/
    watch:{
      value: {
        handler(val) {
          this.val = val
          if(val){
            this.html = this.checkHtml(val);
          }
        },
        //立刻执行handler
        immediate: true
      },

      len: {
        handler(val) {
          this.length = val
        },
        //立刻执行handler
        immediate: true
      },
      width: {
        handler(val) {
          this.width_ = val
        },
        //立刻执行handler
        immediate: true
      }
    },

    props: {
      value: {
        type: String,
        required: false,
      },
      len: {
        type: Number,
        required: false,
        default: null,
      },
      width: {
        type: Number,
        required: false,
        default: 130,
      }
    },
    created() {
      // console.log(11111)
      // console.log(this.doc)
    },
    methods: {
      //判断是否是html
      checkHtml(htmlStr) {
        var reg = /<[^>]+>/g;
        return reg.test(htmlStr);
      }
    },
    model: {
      prop: 'value',
      event: 'change'
    }
  }
</script>

<style scoped>

</style>
